<template>
    <div>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <ul v-if="urlPathVal.indexOf('tao')!=-1 || urlPathVal == 'index' || urlPathVal == '99baoyou' || urlPathVal == 'homeClass'">
                <li v-for="(val,index) in listData" :key="index" @click="getDescribe(val.numIid)">
                    <div class="borderSty">
                        <div>
                            <img style="width:110px;height:110px;" :src="val.pictUrl" alt="">
                        </div>
                        <div style="margin-left: 10px;">
                            <div>
                                <span style="color:#fff;background: #FF2E67;padding:2px;font-size: 10px;border-radius: 4px;">淘宝</span>
                                <span>{{val.title}}</span>
                            </div>
                            <div style="margin-top: 5px;">
                                <span style="font-size: 20px;color:#FF2E67;">￥{{(val.zkFinalPrice-val.couponAmount).toFixed(1)}}</span>
                                <span style="float: right;color:#888;">月售 {{val.tkTotalSales}}</span>
                            </div>
                            <div style="margin-top: 8px;">
                                <span class="rectangleSty">券</span>
                                <span class="afterSty">￥{{val.couponAmount}}</span>
                                <span style="text-decoration: line-through;color:#bbb;">￥{{val.zkFinalPrice}}</span>
                            </div>
                            <div style="float: right;margin-top:5px;" @click.stop="jumpShareTao(val.numIid)">
                                <button class="btn_1">
                                    <img style="margin-top:4px;" src="../../assets/img/common-icon-share.svg" alt="">
                                    <span>分享奖</span>
                                    <span>￥{{((val.zkFinalPrice-val.couponAmount)*(val.commissionRate)*ownRate/10000).toFixed(2)}}</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <ul v-else-if="urlPathVal.indexOf('searchpinduoduo')>-1">
                <li v-for="(val,index) in listData" :key="index" @click="getDescribe(val.goodsId)">
                    <div class="borderSty">
                        <div>
                            <img style="width:110px;height:110px;" :src="val.goodsThumbnailUrl" alt="">
                        </div>
                        <div style="margin-left: 10px;">
                            <div>
                                <span style="color:#fff;background: #FF2E67;padding:2px;font-size: 10px;border-radius: 4px;">拼多多</span>
                                <span>{{val.goodsName}}</span>
                            </div>
                            <div style="margin-top: 5px;">
                                <span style="font-size: 20px;color:#FF2E67;">￥{{(val.minGroupPrice-val.couponDiscount)/100}}</span>
                                <span style="float: right;color:#888;">月售 {{val.salesTip}}</span>
                            </div>
                            <div style="margin-top: 8px;">
                                <span class="rectangleSty">券</span>
                                <span class="afterSty">￥{{val.couponDiscount/100}}</span>
                                <span style="text-decoration: line-through;color:#bbb;">￥{{val.minGroupPrice/100}}</span>
                            </div>
                            <div style="float: right;margin-top:5px;" @click.stop="jumpSharePin(val)">
                                <button class="btn_1">
                                    <img style="margin-top:4px;" src="../../assets/img/common-icon-share.svg" alt="">
                                    <span>分享奖</span>
                                    <span>￥{{((val.minGroupPrice-val.couponDiscount)*val.promotionRate*ownRate/1000000).toFixed(2)}}</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <ul v-else-if="urlPathVal.indexOf('pinduoduo')>-1">
                <li v-for="(val,index) in listData" :key="index" @click="getDescribe(val.goods_id)">
                    <div class="borderSty">
                        <div>
                            <img style="width:110px;height:110px;" :src="val.goods_thumbnail_url" alt="">
                        </div>
                        <div style="margin-left: 10px;">
                            <div>
                                <span style="color:#fff;background: #FF2E67;padding:2px;font-size: 10px;border-radius: 4px;">拼多多</span>
                                <span>{{val.goods_name}}</span>
                            </div>
                            <div style="margin-top: 5px;">
                                <span style="font-size: 20px;color:#FF2E67;">￥{{(val.min_group_price-val.coupon_discount)/100}}</span>
                                <span style="float: right;color:#888;">月售 {{val.sales_tip}}</span>
                            </div>
                            <div style="margin-top: 8px;">
                                <span class="rectangleSty">券</span>
                                <span class="afterSty">￥{{val.coupon_discount/100}}</span>
                                <span style="text-decoration: line-through;color:#bbb;">￥{{val.min_group_price/100}}</span>
                            </div>
                            <div style="float: right;margin-top:5px;" @click.stop="jumpSharePin(val)">
                                <button class="btn_1">
                                    <img style="margin-top:4px;" src="../../assets/img/common-icon-share.svg" alt="">
                                    <span>分享奖</span>
                                    <span>￥{{((val.min_group_price-val.coupon_discount)*val.promotion_rate*ownRate/1000000).toFixed(2)}}</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <ul v-if="urlPathVal.indexOf('jingdong')!=-1">
                <li v-for="(val,index) in listData" :key="index" @click="getDescribeJing(val)">
                    <div class="borderSty">
                        <div>
                            <img style="width:110px;height:110px;" :src="val.imageInfo.imageList[0].url" alt="">
                        </div>
                        <div style="margin-left: 10px;">
                            <div>
                                <span style="color:#fff;background: #FF2E67;padding:2px;font-size: 10px;border-radius: 4px;">京东</span>
                                <span>{{val.skuname}}</span>
                            </div>
                            <div style="margin-top: 5px;">
                                <span style="font-size: 20px;color:#FF2E67;" v-if="val.couponInfo.couponList.length>0">￥{{val.priceInfo.lowestCouponPrice}}</span>
                                <span style="font-size: 20px;color:#FF2E67;" v-else>￥{{val.priceInfo.price}}</span>
                                <span v-if="urlPathVal == 'jingdong' || urlPathVal == 'jingdongtemai1' || urlPathVal == 'jingdongtemai2'" style="float: right;color:#888;">月售 {{val.inOrderCount30DaysSku}}</span>
                                <span v-if="urlPathVal == 'searchjingdong'" style="float: right;color:#888;">月售
                                    {{val.inOrderCount30Days}}</span>
                            </div>
                            <div style="margin-top: 8px;">
                                <span class="rectangleSty">券</span>
                                <span class="afterSty" v-if="val.couponInfo.couponList.length>0">￥{{val.couponInfo.couponList[0].discount}}</span>
                                <span class="afterSty" v-else>￥ 0</span>
                                <span style="text-decoration: line-through;color:#bbb;">￥{{val.priceInfo.price}}</span>
                            </div>
                            <div style="float: right;margin-top:5px;" @click.stop="jumpShareJing(val)">
                                <button class="btn_1">
                                    <img style="margin-top:4px;" src="../../assets/img/common-icon-share.svg" alt="">
                                    <span>分享奖</span>
                                    <span v-if="val.couponInfo.couponList.length>0">￥{{(val.commissionInfo.couponCommission*ownRate).toFixed(2)}}</span>
                                    <span v-else>￥{{(val.commissionInfo.commission*ownRate).toFixed(2)}}</span>

                                </button>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </van-list>
        <div v-if="showIframe" style="display: none;">
            <iframe :src="iframeUrl" frameborder="0"></iframe>
        </div>
    </div>
</template>

<script>
    import {
        Toast,
        List
    } from 'vant';
    export default {
        name: 'productList',
        data() {
            return {
                showIframe: false,
                iframeUrl: undefined,
                listData: [],
                loading: false,
                finished: false,
                num: 0,
                total: 0,
                userId: '',
                ownRate: 0.6,
            }
        },
        props: ['urlPathVal', 'dataList'],
        components: {
            [List.name]: List,
        },
        watch: {
            urlPathVal(val) {
                this.listData = [];
                this.num = 0;
                this.total = 0;
                this.onLoad();
            },
            dataList(val) {
                this.listData = [];
                this.num = 0;
                this.loading = true;
                this.total = 0;
                this.onLoad();
            },
        },
        mounted() {
            this.showIframe = false;
            this.userId = localStorage.getItem('user_id');
            if (this.userId) {
                this.$http.post(this.utils.config + "/netmall/app/person/api/getPersonCenterData?user_id=" + this.userId).then((data) => {
                    this.ownRate = data.data.result.tbMnUser.ownRate / 100;
                })
            }
        },
        methods: {
            getDescribeJing(val) {
                if (val.couponInfo.couponList.length > 0) {
                    this.$http.post(this.utils.config + "/netmall/app/jd/api/zhuanlian?user_id=" + this.userId + "&materialId=" + val.materialUrl + "&couponUrl=" + encodeURIComponent(val.couponInfo.couponList[0].link)).then((data) => {
                        if (data.data.success) {
                            var list = JSON.parse(data.data.data);
                            // console.log(list.data.shortURL)
                            let res = {
                                category: 'jump',
                                des: 'getCoupon',
                                url: list.data.shortURL
                            };
                            plus.runtime.openURL('openApp.jdMobile://virtual?params=' + JSON.stringify(res), function(ress) {},
                                // 'com.taobao.taobao',     -- taobao://
                                // 'com.xunmeng.pinduoduo',     --pinduoduo://
                                'com.jingdong.app.mall',
                            );
                            // window.open('openApp.jdMobile://'+list.data.shortURL.slice(8));                        
                        }
                    })
                } else {
                    window.open(val.materialUrl)
                }
            },
            getDescribe(id) {
                console.log(id)
                // this.$router.push({
                //     path: `/detailsPage/${id}`
                // })
                if (this.urlPathVal.indexOf('pinduoduo') != -1) {
                    this.$http.get(this.utils.config + "/netmall/app/pdd/api/detail/openPddDetail?user_id=" + this.userId + "&goodsId=" + id).then((data) => {
                        if (data.data.success) {
                            let res = JSON.parse(data.data.result.json);
                            console.log(res)
                            this.showIframe = true;
                            this.iframeUrl = res.data.mobile_url;
                            // plus.runtime.openURL(res.data.we_app_web_view_url);

                            // window.location.href = res.data.we_app_web_view_short_url;
                            // let res={
                            //     category:'jump',
                            //     des:'getCoupon',
                            //     url:list.data.mobile_short_url
                            // };
                            // plus.runtime.openURL('pinduoduo://virtual?params='+JSON.stringify(res), function(ress) {                               
                            // },
                            // 'com.xunmeng.pinduoduo', 
                            // );
                        }
                    })
                } else {
                    this.$emit('proId', id)
                }
            },
            jumpShareTao(val) {
                // this.$router.push({
                //     path: `/creatShare/${val}`
                // })
                if (this.userId) {
                    this.$emit('numId', val)
                } else {
                    this.$router.push('/login');
                }
            },
            jumpShareJing(val) {
                if (this.userId) {
                    localStorage.setItem('jingdong', JSON.stringify(val));
                    this.$emit('numId', 'jingdong')
                } else {
                    this.$router.push('/login');
                }
                // this.$router.push('/creatShare/pinduoduo')
            },
            jumpSharePin(val) {
                if (this.userId) {
                    localStorage.setItem('pinduoduo', JSON.stringify(val));
                    this.$emit('numId', 'pinduoduo')
                } else {
                    this.$router.push('/login');
                }
                // this.$router.push('/creatShare/pinduoduo')
            },
            onLoad() {
                var that = this;
                that.num++;
                if (that.urlPathVal == 'searchtao') {
                    that.$http.post(that.utils.config + "/netmall/app/taobao/api/app/query/superQueryList?pageNo=" + that.num + "&pageSize=10&q=" + this.dataList.search + "&sort=" + this.dataList.sort).then((data) => {
                        that.loading = false;
                        if (data.data.success) {
                            for (let j = 0; j < data.data.result.length; j++) {
                                that.listData.push(data.data.result[j]);
                            }
                            if (data.data.result.length < 10) {
                                that.finished = true;
                            }
                            // if(data.data.result){
                            // }else{
                            //     this.$emit('resultVal',false)
                            // }
                        }
                    })
                }
                if (that.urlPathVal == '99baoyou') {
                    that.$http.get(that.utils.config + "/netmall/app/taobao/api/app/index/getProductList?pageNo=" + that.num + "&pageSize=10&type=99" + "&levelOneCategoryId=" + this.dataList.value).then((data) => {
                        if (data.data.success) {
                            this.total = data.data.result.total;
                            for (let i = 0; i < data.data.result.records.length; i++) {
                                that.listData.push(data.data.result.records[i]);
                                this.loading = false;
                            }
                            if (that.total == that.listData.length) {
                                that.finished = true;
                            }
                        }
                    })
                }
                if (that.urlPathVal == 'jingdong' || that.urlPathVal == 'jingdongtemai1' || that.urlPathVal == 'jingdongtemai2') {
                    var url;
                    if (that.urlPathVal == 'jingdongtemai1') {
                        url = this.utils.config + "/netmall/app/jd/api/queryJingfenGoods?eliteId=2&pageSize=10&user_id=" + that.userId + "&pageIndex=" + that.num;
                    } else if (that.urlPathVal == 'jingdongtemai2') {
                        url = this.utils.config + "/netmall/app/jd/api/queryJingfenGoods?eliteId=1&pageSize=10&user_id=" + that.userId + "&pageIndex=" + that.num;
                    } else {
                        if (that.dataList.jingdongVal) {
                            url = this.utils.config + "/netmall/app/jd/api/queryJingfenGoods?eliteId=22&pageSize=10&user_id=" + that.userId + "&pageIndex=" + that.num;
                        } else {
                            if (that.dataList.grade == 0) {
                                url = this.utils.config + "/netmall/app/jd/api/queryGoodsByCatgory?pageSize=10&user_id=" + that.userId + "&pageIndex=" + that.num + "&cid1=" + that.dataList.id;
                            }
                            if (that.dataList.grade == 1) {
                                url = this.utils.config + "/netmall/app/jd/api/queryGoodsByCatgory?pageSize=10&user_id=" + that.userId + "&pageIndex=" + that.num + "&cid2=" + that.dataList.id;
                            }
                            if (that.dataList.grade == 2) {
                                url = this.utils.config + "/netmall/app/jd/api/queryGoodsByCatgory?pageSize=10&user_id=" + that.userId + "&pageIndex=" + that.num + "&cid3=" + that.dataList.parentId;
                            }
                        }
                    }
                    that.$http.post(url).then((data) => {
                        if (data.data.success) {
                            this.total = data.data.result.total_results;
                            for (let i = 0; i < data.data.result.goods_data.length; i++) {
                                data.data.result.goods_data[i].imageInfo = JSON.parse(data.data.result.goods_data[i].imageInfo);
                                data.data.result.goods_data[i].commissionInfo = JSON.parse(data.data.result.goods_data[i].commissionInfo);
                                data.data.result.goods_data[i].pingouinfo = JSON.parse(data.data.result.goods_data[i].pingouinfo);
                                data.data.result.goods_data[i].priceInfo = JSON.parse(data.data.result.goods_data[i].priceInfo);
                                data.data.result.goods_data[i].couponInfo = JSON.parse(data.data.result.goods_data[i].couponInfo);
                                that.listData.push(data.data.result.goods_data[i]);
                                this.loading = false;
                            }
                            if (that.total == that.listData.length) {
                                that.finished = true;
                            }
                        }
                    })
                }
                // if(that.urlPathVal == 'jingdongtemai1' || that.urlPathVal == 'jingdongtemai2'){
                //     var url;
                //     if(that.urlPathVal == 'jingdongtemai1'){
                //         url = this.utils.config+"/netmall/app/jd/api/queryJingfenGoods?eliteId=33&pageSize=10&user_id="+that.userId+"&pageIndex="+that.num;
                //     }
                //     if(that.urlPathVal == 'jingdongtemai2'){
                //         url = this.utils.config+"/netmall/app/jd/api/queryJingfenGoods?eliteId=1&pageSize=10&user_id="+that.userId+"&pageIndex="+that.num;
                //     }
                //     that.$http.post(url).then((data) => {
                //         if (data.data.success) {
                //             this.total = data.data.result.total_results;
                //             for(let i=0;i<data.data.result.goods_data.length;i++){
                //                 data.data.result.goods_data[i].imageInfo = JSON.parse(data.data.result.goods_data[i].imageInfo);
                //                 data.data.result.goods_data[i].commissionInfo = JSON.parse(data.data.result.goods_data[i].commissionInfo);
                //                 data.data.result.goods_data[i].pingouinfo = JSON.parse(data.data.result.goods_data[i].pingouinfo);
                //                 data.data.result.goods_data[i].priceInfo = JSON.parse(data.data.result.goods_data[i].priceInfo);
                //                 data.data.result.goods_data[i].couponInfo = JSON.parse(data.data.result.goods_data[i].couponInfo);
                //                 that.listData.push(data.data.result.goods_data[i]);
                //                 this.loading = false;
                //             }
                //             if(that.total == that.listData.length){
                //                 that.finished = true;
                //             }
                //         }
                //     })
                // }           
                if (that.urlPathVal == 'index') {
                    that.$http.get(that.utils.config + "/netmall/app/taobao/api/app/index/getCentreListRandom?pageNo=" + that.num + "&pageSize=10").then((data) => {
                        if (data.data.success) {
                            this.total = data.data.result.total;
                            for (let i = 0; i < data.data.result.records.length; i++) {
                                that.listData.push(data.data.result.records[i]);
                                this.loading = false;
                            }
                            if (that.total == that.listData.length) {
                                that.finished = true;
                            }
                        }
                    })
                }
                if (that.urlPathVal == 'homeClass') {
                    var categoryId, catId;
                    if (!that.dataList.categoryId) {
                        categoryId = "";
                    } else {
                        categoryId = that.dataList.categoryId;
                    }
                    if (!that.dataList.catId) {
                        catId = "";
                    } else {
                        catId = that.dataList.catId;
                    }
                    that.$http.get(that.utils.config + "/netmall/app/taobao/api/app/index/getCentreList?pageNo=" + that.num + "&pageSize=10&categoryId=" + categoryId + "&levelOneCategoryId=" + catId).then((data) => {
                        if (data.data.success) {
                            this.total = data.data.result.total;
                            for (let i = 0; i < data.data.result.records.length; i++) {
                                that.listData.push(data.data.result.records[i]);
                                this.loading = false;
                            }
                            if (that.total == that.listData.length) {
                                that.finished = true;
                            }
                        }
                    })
                }
                if (that.urlPathVal == 'category') {
                    that.$http.get(that.utils.config + "/netmall/app/taobao/api/app/index/getProductList?pageNo=" + that.num + "&pageSize=10").then((data) => {
                        if (data.data.success) {
                            this.total = data.data.result.total;
                            for (let i = 0; i < data.data.result.records.length; i++) {
                                that.listData.push(data.data.result.records[i]);
                                this.loading = false;
                            }
                            if (that.total == that.listData.length) {
                                that.finished = true;
                            }
                        }
                    })
                }
                // 拼多多精选
                if (that.urlPathVal == 'pinduoduoTj') {
                    that.$http.get(this.utils.config + "/netmall/app/pdd/api/index/getPddGoodsRecommend_new?user_id=" + this.userId + "&pageNo=" + that.num + "&pageSize=10").then((data) => {
                        let res = JSON.parse(data.data.data);
                        if (res.code === 200) {
                            this.total = res.data.total_results;
                            res.data.list.forEach(elem => {
                                this.listData.push(elem);
                            });
                            this.loading = false;
                            if (this.total == this.listData.length) {
                                this.finished = true;
                            }
                        } else {
                            Toast(res.message);
                        }
                    });
                    return;
                }
                // 拼多多分类
                if (that.urlPathVal == 'pinduoduoDl') {
                    that.$http.get(this.utils.config + "/netmall/app/pdd/api/index/getProductList?pageNo=" + that.num + "&pageSize=10&&catId=" + this.dataList.catId).then((data) => {
                        let res = JSON.parse(data.data.data);
                        if (res.code === 200) {
                            this.total = res.data.total_results;
                            res.data.forEach(elem => {
                                this.listData.push(elem);
                            });
                            this.loading = false;
                            if (this.total == this.listData.length) {
                                this.finished = true;
                            }
                        }
                    });
                    return;
                }
                if (that.urlPathVal == 'searchjingdong') {
                    that.$http.post(that.utils.config + "/netmall/app/jd/api/superQueryList?user_id=" + this.userId + "&pageIndex=" + that.num + "&pageSize=10&keyword=" + this.dataList.search).then((data) => {
                        if (data.data.success) {
                            let list = data.data.data.goods_data;
                            that.total = data.data.data.total_results;
                            // that.listData = list;
                            for (let m = 0; m < list.length; m++) {
                                list[m].imageInfo = JSON.parse(list[m].imageInfo);
                                list[m].commissionInfo = JSON.parse(list[m].commissionInfo);
                                list[m].pingouinfo = JSON.parse(list[m].pingouinfo);
                                list[m].priceInfo = JSON.parse(list[m].priceInfo);
                                list[m].couponInfo = JSON.parse(list[m].couponInfo);
                                that.listData.push(list[m]);
                                that.loading = false;
                            }
                            if (that.total == that.listData.length) {
                                that.finished = true;
                            }
                        }
                    })
                }
                if (that.urlPathVal == 'searchpinduoduo') {
                    var sort;
                    if (this.dataList.sort == "") {
                        sort = 0;
                    }
                    if (this.dataList.sort == "total_sales_des") {
                        sort = 5;
                    }
                    if (this.dataList.sort == "tk_rate_des") {
                        sort = 14;
                    }
                    if (this.dataList.sort == "price_asc") {
                        sort = 3;
                    }
                    if (this.dataList.sort == "price_dec") {
                        sort = 4;
                    }
                    that.$http.post(that.utils.config + "/netmall/app/pdd/api/query/superQueryList?page=" + that.num + "&pageSize=10&keyword=" + this.dataList.search + "&sort_type=" + sort).then((data) => {
                        if (data.data.success) {
                            for (let i = 0; i < data.data.result.length; i++) {
                                that.listData.push(data.data.result[i]);
                                this.loading = false;
                            }
                            if (data.data.result.length < 10) {
                                that.finished = true;
                            }
                        }
                    })
                }
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .borderSty {
        background-color: #fff;
        border-radius: 9px;
        border-radius: 6px;
        padding: 15px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .rectangleSty {
        background: #FF2E67;
        line-height: 20px;
        padding: 2px 4px;
        color: #fff;
        font-size: 10px;
        text-align: center;
        width: 10px;
        position: relative;
    }

    .rectangleSty::after {
        content: ' ';
        position: absolute;
        top: 0;
        right: -8px;
        border-width: 17px 8px 0px 0px;
        border-style: solid;
        border-color: #FF2E67 transparent transparent transparent;
    }

    .afterSty {
        background: rgba(255, 46, 103, 0.2);
        line-height: 20px;
        padding: 2px 4px;
        padding-left: 9px;
        color: #FF2E67;
        font-size: 10px;
        text-align: center;
        width: 10px;
        position: relative;
        left: -4px;
    }

    .btn_1 {
        border: none;
        border-radius: 13px;
        padding: 5px 10px;
        background: linear-gradient(#FFCBAB, #DF9780);
        color: #fff;
        line-height: 21px;
    }
</style>